<template>
  <div>
    <div class="card" style="margin-bottom: 5px">
      <el-input style="width: 240px; margin-right: 5px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
      <el-button type="primary">查 询</el-button>
      <el-button type="warning">重 置</el-button>
    </div>

    <div class = "card" style="margin-bottom: 5px">
      <el-button type="primary">添 加</el-button>
      <el-button type="warning">删 除</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" border stripe>
        <el-table-column label="序号" prop = "name"></el-table-column>
        <el-table-column label="头像" prop = "name"></el-table-column>
        <el-table-column label="账号" prop = "name"></el-table-column>
        <el-table-column label="用户名称" prop = "name"></el-table-column>
        <el-table-column label="电话" prop = "name"></el-table-column>
        <el-table-column label="邮箱" prop = "name"></el-table-column>
        <el-table-column label="角色" prop = "name"></el-table-column>
        <el-table-column label="操作" prop = "name"></el-table-column>
      </el-table>
      <div style="margin-bottom: 15px">
        <el-pagination
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            backgroudr
            layout="total, sizes, prev, pager, next,jumper"
            :total="data.total"
        />
      </div>
    </div>
  </div>
</template>

<script setup>

import { reactive } from "vue";
const data = reactive({
  name:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0
})

</script>

<style scoped>

</style>